<template>
<app-framework :banner="banners">
  <content-container>
    <div class="module">
      <h2 class="module_title">联系方式</h2>
      <div class="flex flex-strength">
        <div class="icon"><i class="el-icon-phone"></i></div>
        <div class="text flex-1">联系电话：<br/>400-666-8888</div>
      </div>
      <div class="flex flex-strength">
        <div class="icon"><i class="el-icon-message"></i></div>
        <div class="text flex-1">E-mail:<br/>www@shidao.cn</div>
      </div>
    </div>

    <div class="module module-2">
      <h2 class="module_title">查看线路</h2>
      <div class="flex flex-strength">
        <div class="icon"><i class="el-icon-location"></i></div>
        <div class="text flex-1">公司地址：<br/>上海市徐汇区石龙路329号越界智慧谷1楼112-113室</div>
      </div>
    </div>
  </content-container>
  <!--地图-->
  <!--<baidu-map class="map" ak="BxLCRoFg80lt30MHP7NgPAC2i7ZmeczH" center="上海市徐汇区石龙路329号" />-->
  <baidu-map class="map" ak="BxLCRoFg80lt30MHP7NgPAC2i7ZmeczH" :center="map.location" :zoom="map.zoom" @ready="initMap">
    <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
    <bm-marker :position="map.location" :dragging="true" animation="BMAP_ANIMATION_BOUNCE">
      <!--<bm-label content="师道知识集团" :labelStyle="{color: 'red', fontSize : '20px'}" :offset="{width: -35, height: 30}"/>-->
    </bm-marker>
  </baidu-map>
</app-framework>
</template>

<script>
import AppFramework from '../components/AppFramework'
import ContentContainer from '../components/ContentContainer'
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
import bmNavigation from 'vue-baidu-map/components/controls/Navigation.vue'
import bmMarker from 'vue-baidu-map/components/overlays/Marker.vue'
import bmLabel from 'vue-baidu-map/components/overlays/Label.vue'
export default {
  name: 'contact',
  components: {ContentContainer, AppFramework, BaiduMap, bmNavigation, bmMarker, bmLabel},
  data() {
    return {
      map:{
        center: {
          // lng: 110.185421,
          lng: 116.985421,
          lat: 31.364864
        },
        location: {
          lng: 121.448115,
          lat: 31.162544
        },
        zoom: 6
      },
      banners: [
        {img: '/images/banner-contact.jpg'}
      ]
    }
  },
  created() {

  },
  methods: {
    initMap() {
      // console.log('init')
      // this.map.center.lng = 121.448115
      // this.map.center.lat = 31.162544
      // this.map.zoom = 5
    }
  }
}
</script>

<style scoped lang="scss">

.module{
  margin: 40px 0;

  .module_title{
    margin-bottom: 20px;
  }
  .icon,.text{
    line-height: 2;
    font-size: 16px;
    color: #333;
  }
  .icon{
    margin-right:20px;
    color: #333;

  }
  .text{

  }
}

.map{
  height: 40vw;
  width: 100%;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  padding: 20px 0;
  background-color: #ccc;
}
</style>
